// 核心库
import i18n from 'i18next';
// React 绑定库
import { initReactI18next } from 'react-i18next';
// 用于从服务器/HTTP 端点加载翻译文件的插件。
import HttpBackend from 'i18next-http-backend';
//  用于在浏览器环境中自动检测语言的插件
import Detector from 'i18next-browser-languagedetector';
i18n
  .use(HttpBackend)
  .use(Detector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'zh', // 当无法找到对应语言时，回退到此语言
    preload: [navigator.language], // 提前加载默认语言
    debug: process.env.NODE_ENV === 'development', // 开发模式下启用调试
    // 支持的语言列表
    supportedLngs: ['en', 'zh'],
    react: {
      // 是否在 Suspense 中包装组件
      // 如果你的翻译文件是异步加载的，并且你想在加载时显示 fallback UI，则设为 true
      // 需要在你的组件树上层有 <Suspense fallback={...}> 包裹
      useSuspense: true,
    },
    interpolation: {
      escapeValue: false, // React 已经内置了 XSS 防护，无需 i18next 再次转义
    },
    // 定义可用的命名空间
    ns: ['common'],
    // 默认命名空间
    defaultNS: 'common',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    detection: {
      // 检测顺序，从左到右依次尝试
      order: [
        'querystring',
        'cookie',
        'localStorage',
        'htmlTag',
        'sessionStorage',
        'navigator',
        'path',
        'subdomain',
      ],

      // 缓存用户选择的语言到哪些地方
      caches: ['localStorage', 'cookie'],
    },
  })
  .then(() => {
    // 在语言变化时更新HTML lang属性
    i18n.on('languageChanged', lng => {
      document.documentElement.setAttribute('lang', lng);
    });
  });

export default i18n;
